<template>
  <div id="Water">
    <div><h2 id="title">
      账户详细流水表
    </h2></div>
    <Back></Back>
    <div  id="tables">
    <el-table
        :data="tableData.slice((currentPage-1)*size,currentPage*size)"
        stripe
        style="width: 90%">
      <el-table-column
          prop="date"
          label="日期"
          width="180">
      </el-table-column>
      <el-table-column
          prop="name"
          label="姓名"
          width="180">
      </el-table-column>
      <el-table-column
          prop="address"
          label="地址">
      </el-table-column>
      <el-table-column
          prop="card"
          label="卡号">
      </el-table-column>
    </el-table>
<!--分页-->
    <el-pagination
        id="pages"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length">
    </el-pagination>
  </div>
  </div>
</template>

<script>
import back from '@/components/back/Return';
import { water } from '@/api/info';
export default {
  name: 'Water',
  data() {
    return {
      currentPage:1,
      size:5,
      tableData: [{
        date: '2018-05-02',
        name: '刘备',
        address: '上海市',
        card: '5446262553'
      }, {
        date: '2019-05-04',
        name: '张飞',
        address: '北京市',
        card: '673564646'
      }, {
        date: '2014-05-01',
        name: '关羽',
        address: '四川省武侯区',
        card: '7635235242'
      }, {
        date: '2016-05-03',
        name: '曹操',
        address: '广东省东莞',
        card: '84234234234'
      }]
    }
  },
  mounted() {
    //发送请求
    water(this.$route.params).then(respone=>{
      console.log(respone);
    }).catch(error=>{
      console.log(error);
    })
  },
  methods:{
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.size = val
    },
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
    }
  },
  components: {
    'Back': back
  }
};
</script>

<style scoped>
#title{
  line-height: 100px;
  text-align: center;
  color: #00a854;
}
#tables{
  width: 90%;
  margin: 0 auto;
}
#pages{
  margin-top: 20px;
}
</style>